<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>妈妈生日快乐!</title>
    <link rel="stylesheet"href="mama.css">
        <style>
            .envelope-wrapper {
                position: relative;
                left: -14%;
                top: 50%;
                perspective: 1000px;
                animation: flyIn 3s ease-out forwards;
            }
            .envelope {
                position: relative;
                width: 300px;
                height:200px;
                transform-style: preserve-3d;
            }
            .envelope-front {
                position: relative;
                width: 100%;
                height: 100%;
                background-color: pink;
                border: 2px solid lightskyblue;
                border-radius: 0 0 10px 10px;
                border-top: none;
                z-index: 2;
            }
            .envelope-flap {
                position:absolute;
                top: -70px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 150px solid transparent;
                border-right: 150px solid transparent;
                border-bottom: 70px solid lightpink;
                z-index: 3;
            }
            .envelope:hover.envelope-flap{
                transform: rotate(-180deg);
            }

            .message {
                position: absolute;
                top: 17px;
                left: 13px;
                width: calc(100%-40px);
                transform:none;
                padding: 20px;
                background-color: #fff;
                border: 1px solid lightskyblue;
                border-radius: 5px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                font-size: 14px;
                line-height: 1;
                z-index: 9;
            }
            @keyframes flyIn {
                0% {
                    transform: translate(0, 0) rotate(45deg);
                    opacity: 0;
                }
                100% {
                    transform: translate(calc(50vw - 100px), calc(50vh - 70px)) rotate(0deg);
                    opacity: 1;
                }
            }
            .envelope:hover::after {
                transform: rotateX(180deg);
            }
            @keyframes float {
                0% { transform: translateY(0px) rotate(0deg); }
                50% { transform: translateY(-15px) rotate(2deg); }
                100% { transform: translateY(0px) rotate(0deg); }
            }
        </style>
</head>
<body>
<div class="container">
    <div class="content">
        <div class="envelope-wrapper">
            <div class="envelope">
                <div class="envelope-front"></div>
                <div class="envelope-flap"></div>
            <div class="message">
                亲爱的妈妈，生日快乐！您的爱像阳光，温暖了我的一生。愿岁月温柔待您，健康常伴，幸福长存。
                岁月不是偷走青春的小偷，您把年华都织成了爱的针脚。愿青春常驻，岁月静好。
                一粥一饭，是您的温柔；一言一语，是您的牵挂。妈妈，愿您岁岁安康。
                愿凛冬散尽星河长明，所见皆为美好，所得不负努力。
            </div>
            </div>
        </div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
    </div>
</div>
</body>
</html>